<template>
  <div class="order-info-wrap">
    <TitleBalance :name="`订单信息`"
                  :subtitle="'合同编号：' + certEreData.contractCode">
      <!-- 内容 -->
      <template slot="center">
        <el-row :gutter="20"
                class="order-desc-wrap"
                :style="descBox">
          <el-col :span="12">
            <div class="left-desc">
              <description title="">
                <description-item label="发货方名称"
                                  expand
                                  :value="certOrder.fromCustomerName"
                                  :span="24" />
                <description-item label="发货联系人"
                                  expand
                                  :value="certOrder.fromContactName"
                                  :span="24" />
                <description-item label="发货电话"
                                  expand
                                  :value="certOrder.fromContactMobile"
                                  :span="24" />
                <description-item label="发货地址"
                                  expand
                                  :value="certOrder.fromAddress"
                                  :span="24" />
                <description-item label="发货时间"
                                  expand
                                  :value="certOrder.fromTime"
                                  :span="24" />
              </description>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="right-desc">
              <description title="">
                <description-item label="收货方名称"
                                  expand
                                  :value="certOrder.toCustomerName"
                                  :span="24" />
                <description-item label="收货联系人"
                                  expand
                                  :value="certOrder.toContactName"
                                  :span="24" />
                <description-item label="收货电话"
                                  expand
                                  :value="certOrder.toContactMobile"
                                  :span="24" />
                <description-item label="收货地址"
                                  expand
                                  :value="certOrder.toAddress"
                                  :span="24" />
                <description-item label="收货时间"
                                  expand
                                  :value="certOrder.toTime"
                                  :span="24" />
              </description>
            </div>
          </el-col>
        </el-row>
        <!-- <orderDesc v-bind="$attrs" /> -->
        <!-- 列表 -->
        <div class="table-top"
             :style="tableTop">
          <table :style="table"
                 border="1px"
                 cellspacing="0px"
                 cellpadding="10px">
            <thead>
              <tr class="table-header">
                <td v-for="(item, index) in columns"
                    :key="index"
                    :width="item.with">{{item.label}}</td>
              </tr>
            </thead>
            <tbody v-for="(item, index) in certOrder.goods"
                   :key="index">
              <td>{{ index }}</td>
              <td>{{item.goodsName}}</td>
              <td>{{item.quantity}}</td>
              <td>{{item.goodsSpec}}</td>
              <td>{{item.totalWeight}}</td>
              <td>{{item.totalVolume}}</td>
            </tbody>
          </table>
          <div class="total"
               :style="total">合计：数量 {{certEreData.fromTotalAmount}}件；重量 {{certEreData.fromTotalWeight}}公斤；体积 {{certEreData.fromTotalVolume}}方</div>
        </div>
      </template>
    </TitleBalance>
  </div>
</template>

<script>
import TitleBalance from './TitleBalance.vue';
import Description from "@views/digitalize/components/desc/Description";
import DescriptionItem from "@views/digitalize/components/desc/DescriptionItem";

const columns = [
  {
    label: "序号",
    with: '40px'
  },
  {
    label: '货物名称'
  },
  {
    label: '数量(件)'
  },
  {
    label: '规格'
  },
  {
    label: '重量(公斤)'
  },
  {
    label: '体积(方)'
  }
]
export default {
  name: 'CertOrder',
  components: { TitleBalance, Description, DescriptionItem },
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      tableData: [],
      columns
    }
  },
  computed: {
    certOrder () {
      return this.value?.certOrder
    },
    certEreData () {
      return this.value?.certEreData
    },
    table () {
      return {
        fontSize: '12px',
        width: "100%",
        fontWeight: '500',
        fontFamily: 'DFKai-scrollBy',
        borderCollapse: "collapse",
        margin: "0 auto"
      }
    },
    descBox () {
      return {
        borderBottom: '1px dashed #cccccc',
        padding: "10px 0"
      }
    },
    total () {
      return {
        paddingTop: '8px',
        fontSize: '14px',
        fontWeight: 400,
        lineHeight: '20px',
        // color: '#666666'
      }
    },
    tableTop () {
      return {
        paddingBottom: '20px',
        borderBottom: '1px dashed #cccccc'
      }
    }
  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
@media print {
  /* 确保表头在每页开头显示 */
  .table-header {
    position: sticky;
    top: 0;
  }
  /* 在表头之前插入分页符 */
  .table-header::before {
    display: block;
    page-break-before: always;
  }
}
</style>